<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<!-- 引入bootstrap -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.15.0/messages_zh.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.15.0/additional-methods.js"></script>

<link rel="stylesheet" type="text/css" href="style/css/login.css" />
<style type="text/css">
#indexbox {
	width: 100%;
}

#indextop {
	background-color: #FFFFFF;
	padding-left: 20px;
	height: 70px;
}

#indexbottom {
	background-color: #FFFFFF;
	height: 10px;
}

#indexmiddle {
	background-color: #84C1FF;
	height: 460px;

}

#title1 {
	 margin:20% auto; width:400px; height:100px; 
}
</style>
<script>
	$(function() {
		$.validator.setDefaults({
			submitHandler : function(form) {
				//alert("提交事件!");
				form.submit();
			}
		});

		$("#registerform").validate(
				{
					//debug : true, //调试模式，即使验证成功也不会跳转到目标页面
					rules : { //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
						password : {
							required : true,
							rangelength : [ 6, 20 ]
						},
						confirmpassword : {
							required : true,
							rangelength : [ 6, 20 ],
							equalTo : password //表示和id="spass"的值相同
						},
						email : {
							required : true,
							email : true
						},
					},
					messages : {
						password : {
							required : "请输入密码",
							rangelength : $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串")
						},
						confirmpassword : {
							required : "请再次输入密码",
							equalTo : "两次密码必须一致" //表示和id="spass"的值相同
						},
						email : {
							required : "请填写邮件",
							email : "邮箱格式不正确"
						}
					}
		});
	});
</script>

</head>
<body>
	<div id="indexbox" class="container">
				<div id="indextop" class="row clearfix">
					<div class="col-md-12 column">
						<img src="style/image/ateamlogo.png">
					</div>
				</div>
				<div id="indexmiddle" class="row clearfix">
					<div class="col-md-7 column">
						<div id="title1">
							<h2>@Team提供的不仅仅是一个工具</h2>
							<h2>更是一种全新的</h2>
							<h1>协作思维和团队管理方式。</h1> 
						</div>
					</div>
					<div  class="col-md-5 column">
						<div  class="container">
							<section id="content">
								<form id="registerform" action="register.do" method="post">
									<h1>registe for @team</h1>
									<div>
										<input type="text" placeholder="请输入邮箱" required="邮箱不能为空"
											name="email" id="email" />
									</div>
									<div>
										<input type="password" placeholder="请输入密码" required="密码不能为空"
											name="password" id="passord" />
									</div>
									
									<div>
										<input type="password" placeholder="请再次输入密码" required="密码不能为空"
											name="confirmpassword" id="confirmpassword" />
									</div>
									<div>
										<input type="submit" value="register" /> &nbsp;
										&nbsp;&nbsp;</a> <a href="index.jsp">返回</a>
									</div>
								</form>
								<!-- form -->
								<div class="button">
									<a href="help.html">用户手册</a>
								</div>
								<!-- button -->
							</section>
							<!-- content -->
						</div>
						<!-- container -->
					</div>
				</div>
				<div id="indexbottom" class="row clearfix">
					<div class="col-md-12 column"></div>
				</div>
			</div>
</body>
</html>